<dom-module id="ve-vec2">
    <style>
         :host {
            display: flex;
            flex-direction: column;
            align-items: center
        }
        
        span.space {
            flex: none;
            height: 6px
        }
    </style>
    <template>
        <div class="flex-1">
            <ve-unit-input id="x" class="flex-1" disabled="{{disabled}}" readonly="{{readonly}}" path="{{path}}.x" input-value="{{value.x}}"
                step="{{attrs.step}}" precision="{{attrs.precision}}" min="{{attrs.min}}" max="{{attrs.max}}" hint="X"></ve-unit-input>
            <span class="space"></span>
            <ve-unit-input id="y" class="flex-1" disabled="{{disabled}}" readonly="{{readonly}}" path="{{path}}.y" input-value="{{value.y}}"
                step="{{attrs.step}}" precision="{{attrs.precision}}" min="{{attrs.min}}" max="{{attrs.max}}" hint="Y"></ve-unit-input>
        </div>
    </template>

    <script>
        (() => {
            'use strict';
            Polymer({
                properties: {
                    value: {
                        type: Object,
                        value: function() {
                            return {
                                x: 0,
                                y: 0
                            }
                        },
                        notify: true
                    },
                }
            });
        })();
    </script>
</dom-module>